<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style>
			.card {
				border-radius: 3px;
				background: #FFF;
				box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.06);
				width: 300px;
				height: 378px;
				flex-shrink: 0;
			}

			.cardBox {
				display: flex;
				position: relative;
				transition: all 0.5s;
			}

			.cardBoxBox {
				display: flex;
				width: 100%;
				overflow-x: hidden;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="cardBoxBox">
			<div class="cardBox">
				<div class="card">AAAAA</div>
				<div class="card">BBBBB</div>
				<div class="card">CCCCC</div>
				<div class="card">DDDDD</div>
				<div class="card">EEEEE</div>
			</div>
		</div>
		<script>
			let start = 0,
				current = 0,
				now = 0,
				flag = false,
				bb = document.querySelector(".cardBoxBox"),
				b = document.querySelector(".cardBox")
			bb.addEventListener("touchstart", (e) => {
				start = e.touches[0].pageX
				flag = true
			})
			bb.addEventListener("touchmove", (e) => {
				current = e.touches[0].pageX
				//start-current>0 往左滑
				if (flag) {
					if (now < 4 && start - current > 120) {
						console.log("下一个")
						change(++now)
						flag = false
					} else if (now >= 1 && start - current < -120) {
						console.log("上一个")
						change(--now)
						flag = false
					}
				}
			})


			function change(index) {
				let p = index == 1 ? 260 : 300 * (index - 1) + 260
				index == 0 ? p = 0 : null
				b.style.transform = `translateX(-${p}px)`
			}
		</script>
	</body>
</html>